<template>
  <el-container style="height: 100%;" class="dealBaseHome fundBaseHome">
    <el-header class="app-header">
      <div class="titlebar">
        <div class="titlebar-title">
          <div class="title">
            <div class="tit" style="max-width: 50%!important;">
              <el-button class="tipText" type="text">
                <p style="width:100%;"> {{ mediationName }}</p>
              </el-button>
            </div>
            <div class="header-msg">
              <div v-for="(item, index) in dataList" :key="index" class="content">
                <div class="text">
                  <el-tooltip placement="bottom">
                    <div slot="content">
                      <span v-for="info in item.remark" :key="info">
                        {{ info }}<br>
                      </span>
                    </div>
                    <el-button class="tipText" type="text"> {{ item.name }}
                      <i class="el-icon-question" />
                    </el-button>
                  </el-tooltip>
                </div>
                <div class="text">{{ item.value }}</div>
              </div>
            </div>
            <div class="tab-change" style="flex: 1;justify-content: flex-end;">
              <Internationalization v-show="mediationName === '国际化'" />
            </div>
          </div>
        </div>
      </div>
    </el-header>
    <div class="page-component__scroll">
      <fullView
        ref="fullView"
        :bus-id="busId"
        bus-type=""
        :child-left-menu="menuList"
        :bus-name="mediationName"
        :default-active="activeIndex"
      />
    </div>
  </el-container>
</template>

<script>
import { childMenuList	} from '@/api/system/menu'
import { getMediationBase } from '@/api/deal/mediation/mediationBase'
import { listMediationEmployRecord } from '@/api/deal/mediation/employ/mediationEmployRecord'
import fullView from '@/components/fullView'
export default {
  components: {
    fullView
  },
  data() {
    return {
      loading: false,
      busId: this.$route.query.id,
      // name
      mediationName: this.$route.query.id,
      menuList: [],
      dataList: [],
      activeIndex: ''
    }
  },
  created() {
    this.listLoad()
    this.init()
    this.initBar()
    this.busId = this.$route.query.id
  },
  mounted() {
  },
  methods: {
    init() {
      getMediationBase(this.$route.query.id).then(response => {
          this.mediationName = document.title = response.data.mediationName
      })
    },
    initBar() {
      const params = {
        mediationId: this.$route.query.id
      }
      let barData = []
      listMediationEmployRecord(params).then(response => {
        // 满意度评分和
        let sum = 0
        // 满意度评分平均数
        let average = 0
        for (let i = 0; i < response.rows.length; i++) {
          sum += response.rows[i].rate
        }
        average = '无数据'
        if (response.rows.length !== 0) {
          average = (sum / response.rows.length).toFixed(1)
        }
        barData = [
          { name: this.$t('聘用次数'), remark: [this.$t('聘用记录总次数')], value: response.rows.length },
          { name: this.$t('满意度'), remark: [this.$t('聘用记录满意度平均分'), this.$t('为无数据说明没有聘用记录进行评分')], value: average }
        ]
        this.dataList = barData
      })
    },
    listLoad() {
      // 菜单列表
      childMenuList('mediation_menu').then(response => {
        this.menuList = response.rows
        this.activeIndex = this.menuList[0].id
      })
    }
  }
}
</script>

<style scoped>

</style>
